<!-- 模态弹窗 -->
<template>
	<view class="modal-box flex-column align-center">
		<view class="title">{{title}}</view>
		<view class="text">
			<view class="" v-for="item,index in textList" :key="index">{{item}}</view>
		</view>
		<view class="btn">
			<view class="btn-item cancel" v-if="isCancel" @click="oncancel">{{closeText}}</view>
			<view class="btn-item verify" :class="{'verify-box':!isCancel}" @click="onverify">{{everifyText}}</view>
		</view>
	</view>
</template>

<script>
	/**
	 * @title {String} 模态弹窗提示
	 * @text {String} 模态弹窗提示语
	 * @isCancel {Boolean} 模态弹窗取消按钮的展示与否
	 */

	export default {
		props: {
			title: {
				type: String,
				default () {
					return "提示"
				}
			},
			text: {
				type: String,
				default () {
					return "这是一个模态弹窗"
				}
			},
			isCancel: {
				type: Boolean,
				default () {
					return true
				}
			},
			everifyText: {
				type: String,
				default () {
					return '确认'
				}
			},
			closeText: {
				type: String,
				default () {
					return '取消'
				}
			}
		},
		data() {
			return {
				textList: []
			}
		},
		created() {
			if (this.text.includes("&emsp;")) {
				this.textList = this.text.split("&emsp;")
			} else {
				this.textList.push(this.text)
			}
		},
		methods: {
			// 取消事件
			oncancel() {
				this.$emit("oncancel")
			},
			// 确认事件
			onverify() {
				this.$emit("onverify")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modal-box {
		width: 560rpx;
		height: auto;
		border-radius: 40rpx;
		background: #fff;
		padding: 40rpx;
		

		.title {
			font-size: 36rpx;
			font-weight: 600;
			color: #1D2129;
		}

		.text {
			text-align: center;
			margin-top: 24rpx;
			margin-bottom: 60rpx;
			color: #4E5969;
			font-size: 30rpx;
			/* #ifdef APP */
			padding: 0 40rpx;
			/* #endif */
		}

		.btn {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.btn-item {
				width: 220rpx;
				height: 88rpx;
				border-radius: 30rpx;
				text-align: center;
				line-height: 88rpx;
			}

			.cancel {
				border: 1rpx solid #989DB3;
			}

			.verify {
				background: #2E56EB;
				color: #fff;
			}

			.verify-box {
				width: 100%;
			}
		}
	}
</style>